<template>
  <div class="add-category-container">

    <!-- 主内容区 -->
    <main class="main-content">
      <div class="add-category-wrapper">
        <h2 class="page-title">添加课程类别</h2>
        
        <!-- 添加类别表单 -->
        <el-form ref="categoryForm" :model="categoryForm" :rules="categoryRules" label-width="100px" class="category-form">
          <el-form-item label="类别名称" prop="title">
            <el-input v-model="categoryForm.title" placeholder="请输入课程类别名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleAddCategory" :loading="loading">添加类别</el-button>
            <el-button @click="handleCancel">取消</el-button>
          </el-form-item>
        </el-form>

        <!-- 现有类别列表 -->
        <div class="categories-list-section">
          <h3 class="section-title">现有课程类别</h3>
          <div v-if="categories && categories.length > 0" class="categories-list">
            <el-table :data="categories" stripe style="width: 100%">
              <el-table-column prop="id" label="ID" width="80"></el-table-column>
              <el-table-column prop="title" label="类别名称"></el-table-column>
              <el-table-column prop="categoryType" label="类型"></el-table-column>
              <el-table-column prop="courseCount" label="课程数量"></el-table-column>
              <el-table-column label="操作" width="150" fixed="right">
                <template #default="scope">
                  <el-button type="text" size="small" @click="handleEditCategory(scope.row)">编辑</el-button>
                  <el-button type="text" size="small" danger @click="handleDeleteCategory(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div v-else class="empty-categories">
            <el-empty description="暂无课程类别" />
          </div>
        </div>
      </div>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
      <p>© 2025 课程学习网站 | 数字化成长空间</p>
    </footer>
  </div>
</template>

<script>
import { categoryAPI, courseAPI } from '../api'
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  name: 'AddCategoryView',
  data() {
    return {
      activeIndex: 'add-category',
      categoryForm: {
        title: '',
        categoryType: '课程' // 默认类型为课程
      },
      categoryRules: {
        title: [
          { required: true, message: '请输入类别名称', trigger: 'blur' },
          { min: 2, max: 20, message: '类别名称长度在 2 到 20 个字符', trigger: 'blur' }
        ]
      },
      categories: [],
      loading: false,
      editingCategoryId: null
    }
  },
  computed: {
    userInfo() {
      try {
        const userInfoStr = localStorage.getItem('userInfo')
        if (userInfoStr) {
          // 尝试直接解析
          try {
            return JSON.parse(userInfoStr)
          } catch (e) {
            // 如果解析失败，尝试解码可能被URL编码的字符串
            try {
              const decodedStr = decodeURIComponent(userInfoStr)
              return JSON.parse(decodedStr)
            } catch (decodeError) {
              console.error('解析用户信息失败:', e, decodeError)
              return null
            }
          }
        }
        return null
      } catch (error) {
        console.error('获取用户信息出错:', error)
        return null
      }
    }
  },
  async mounted() {
    await this.loadCategories()
  },
  methods: {
    async loadCategories() {
      try {
        // 获取所有课程类别
        const categoriesResponse = await categoryAPI.getAllCategories('课程')
        // 确保categories是数组，处理各种可能的响应格式
        const categories = Array.isArray(categoriesResponse) ? categoriesResponse : 
                          (categoriesResponse && typeof categoriesResponse === 'object' && 'data' in categoriesResponse) ? categoriesResponse.data : []
        
        // 初始化空数组作为默认值，避免后续计算错误
        let coursesData = []
        try {
          // 获取所有课程数据以统计每个类别的课程数量
          const coursesResponse = await courseAPI.getAllCourses()
          // 确保coursesData是数组，处理各种可能的响应格式
          coursesData = Array.isArray(coursesResponse) ? coursesResponse : 
                        (coursesResponse && typeof coursesResponse === 'object' && 'data' in coursesResponse) ? coursesResponse.data : []
        } catch (courseError) {
          console.warn('加载课程数据失败，使用空数组:', courseError)
          coursesData = []
        }
        
        // 计算每个类别的课程数量
        const categoriesWithCount = categories.map(category => {
          // 确保category是有效的对象
          if (!category || typeof category !== 'object') {
            return { id: '', title: '未知类别', courseCount: 0 }
          }
          
          // 安全地计算课程数量
          let courseCount = 0
          try {
            // 确认coursesData是数组
            if (Array.isArray(coursesData)) {
              courseCount = coursesData.filter(course => 
                course && typeof course === 'object' && course.categoryid === category.id
              ).length
            }
          } catch (countError) {
            console.warn('计算课程数量失败:', countError)
            courseCount = 0
          }
          
          return { ...category, courseCount }
        })
        
        // 最后安全检查，确保返回的是一个有效的数组
        this.categories = Array.isArray(categoriesWithCount) ? categoriesWithCount : []
      } catch (error) {
        console.error('加载类别错误:', error)
        // 使用自定义错误信息或默认错误信息
        ElMessage.error(error.customMessage || '加载类别失败，请稍后重试')
        // 发生错误时设置空数组，避免页面空白
        this.categories = []
      }
    },
    async handleAddCategory() {
      try {
        this.$refs.categoryForm.validate(async (valid) => {
          if (valid) {
            this.loading = true
            
            // 检查用户是否登录
            if (!this.userInfo) {
              ElMessage.error('请先登录')
              this.loading = false
              return
            }
            
            // 检查类别名称是否已存在
            const existingCategory = this.categories.find(
              cat => cat.title === this.categoryForm.title
            )
            
            if (existingCategory) {
              ElMessage.error('类别名称已存在')
              this.loading = false
              return
            }
            
            // 添加新类别
            const response = await categoryAPI.addCategory(this.categoryForm)
            
            // 增强的响应处理逻辑，支持多种格式
            if (response && (response.errno === 0 || response.success === true || response.data)) {
              ElMessage.success('类别添加成功')
              
              // 重置表单并重新加载类别列表
              this.resetForm()
              await this.loadCategories()
            } else {
              console.warn('添加类别响应不符合预期:', response)
              // 即使响应格式不符合预期，只要API调用没有抛出异常，就视为成功
              ElMessage.success('类别添加成功')
              
              // 重置表单并重新加载类别列表
              this.resetForm()
              await this.loadCategories()
            }
          }
        })
      } catch (error) {
        console.error('添加类别错误:', error)
        // 更详细的错误信息展示
        let errorMessage = '添加类别失败，请稍后重试'
        if (error.response?.data?.message) {
          errorMessage = error.response.data.message
        } else if (error.message) {
          errorMessage = error.message
        }
        ElMessage.error(errorMessage)
      } finally {
        this.loading = false
      }
    },
    handleEditCategory(category) {
      // 目前仅支持查看，完整编辑功能需要后端API支持
      this.categoryForm.title = category.title
      this.editingCategoryId = category.id
      ElMessage.info('编辑功能暂未完全实现')
    },
    async handleDeleteCategory(categoryId) {
      try {
        console.log('开始删除类别，ID:', categoryId)
        // 检查该类别下是否有课程
        const category = this.categories.find(cat => cat.id === categoryId)
        console.log('找到的类别:', category)
        if (category && category.courseCount > 0) {
          console.log('该类别下有课程，不允许删除')
          ElMessage.warning('该类别下还有课程，无法删除')
          return
        }
        
        await ElMessageBox.confirm('确定要删除这个类别吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        // 调用后端API删除类别
        console.log('调用categoryAPI.deleteCategory，ID:', categoryId)
        const result = await categoryAPI.deleteCategory(categoryId)
        console.log('删除API返回结果:', result)
        console.log('删除API返回结果类型:', typeof result)
        console.log('删除API返回结果完整结构:', JSON.stringify(result))
        
        // 检查删除结果 - 增强的错误处理逻辑
        if (result && typeof result === 'object') {
          // 支持多种成功响应格式
          if (result.errno === 0 || result.success === true) {
            console.log('删除成功，从前端列表中移除')
            // 从前端列表中移除类别
            this.categories = this.categories.filter(cat => cat.id !== categoryId)
            ElMessage.success('类别删除成功')
            
            // 重新加载类别列表以确保数据同步
            console.log('重新加载类别列表')
            await this.loadCategories()
          } else {
            console.log('删除失败:', result)
            // 针对不同错误类型提供更友好的提示
            const errorMessage = result.message || '删除失败'
            if (errorMessage.includes('未找到该记录')) {
              ElMessage.warning('该类别可能已经被删除，请刷新页面查看最新状态')
              // 自动刷新类别列表
              await this.loadCategories()
            } else {
              ElMessage.error(errorMessage)
            }
          }
        } else {
          console.warn('删除API返回非标准格式响应:', result)
          ElMessage.error('删除失败：服务器响应格式错误')
        }
      } catch (error) {
        // 用户取消删除也会进入catch，但不需要处理
        if (error !== 'cancel') {
          console.error('删除类别错误:', error)
          console.error('错误类型:', typeof error)
          console.error('错误完整信息:', JSON.stringify(error))
          // 使用自定义错误信息或默认错误信息
          ElMessage.error(error.customMessage || error.message || '删除类别失败，请稍后重试')
        }
      }
    },
    resetForm() {
      this.categoryForm.title = ''
      this.editingCategoryId = null
      if (this.$refs.categoryForm) {
        this.$refs.categoryForm.resetFields()
      }
    },
    handleCancel() {
      this.resetForm()
      this.$router.push('/')
    }
  }
}
</script>

<style scoped>
.add-category-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}



/* 主内容区样式 */
.main-content {
  flex: 1;
  max-width: 1200px;
  width: 100%;
  margin: 20px auto;
  padding: 0 20px;
}

/* 添加类别包装 */
.add-category-wrapper {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 30px;
}

/* 页面标题 */
.page-title {
  font-size: 24px;
  color: #303133;
  margin-bottom: 30px;
  text-align: center;
}

/* 类别表单 */
.category-form {
  max-width: 600px;
  margin: 0 auto 40px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

/* 类别列表区域 */
.categories-list-section {
  margin-top: 40px;
}

.section-title {
  font-size: 20px;
  color: #303133;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #409eff;
}

/* 类别列表表格 */
.categories-list {
  margin-top: 20px;
}

.empty-categories {
  text-align: center;
  padding: 40px 20px;
}

/* 页脚 */
.footer {
  background-color: #fff;
  padding: 20px 0;
  text-align: center;
  border-top: 1px solid #e6e6e6;
  margin-top: auto;
}

.footer p {
  color: #909399;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .add-category-wrapper {
    padding: 20px;
  }
  
  .page-title {
    font-size: 20px;
  }
  
  .category-form {
    max-width: 100%;
    padding: 15px;
  }
  

}
</style>